<template>
<div id="pageList">
    <ul id="pageListUl">
        <li class="groupList" v-for="(page,index) in getPageList" :index="index" :key="index" @click.stop="selectPage(index,page.pageType,page.pageName)" :class="{activePage: getActivePageIndex == index}">
            <a>{{page.pageName}}</a>
            <img src="../assets/images/navpage_select.png" v-if="page.pageType == 1" @click="addSlidePage(index,getActiveOption)"/>
        </li>
    </ul>
    <p class="moveBtnBox">
        <span class="deleteBtn" @click="deleteSlidePage">删除</span>
        <span class="moveBtn" @click="upSlidePage">上移</span>
        <span class="moveBtn" @click="downSlidePage">下移</span>
    </p>
</div>            
    
</template>
<script>
    import packagingUtil from '../packagingUtil.js'

    export default{
        props:[],
        data () {
            return {
                activePageType: 0,
                activePageName: '',
                selectedIndexs: []
            }
        },
        mounted(){
            try{
				$('#pageListUl').perfectScrollbar('destroy');
			}catch(e){}
            $("#pageListUl").perfectScrollbar();
        },
        methods: {
            selectPage (index,pageType,pageName) { 
                this.activePageType = pageType;
                this.activePageName = pageName;
                this.$store.commit('changeActivePageIndex' , index);
            },
            addSlidePage (index,type){
                let productId = this.$store.state.productInfo.id;
                let spaceId = this.$store.state.spaceId; 
                
                let content = {
                    "pageName": "轮播页_" + this.getPageNameLastIndex(),
                    "pageType": "1",
                    "stayTime": "2000",
                    "backgroundImage": {
                        name : '轮播页_' + this.getPageNameLastIndex() + '.png',
                        url: '/magicflu/buildpackage/target/'+ spaceId +'/' + productId + '/' + (type == 'installPage' ? 'install-slides' : 'upgrade-slides') + '/slidePage_6.png',
                        nsisUseName: 'slidePage_' + this.getNsisNameLastIndex() + '.png'
                    }
                }
                let pageInfo = {
                    activePageIndex: index,
                    activeOption: type,
                    content: content
                }
               this.$store.commit('addSlidePage',pageInfo);
            },
            getNsisNameLastIndex (){
                let pages = this.$store.state.productInfo[this.getActiveOption].pages.page;
                let lastIndex = 0;
                for(let i = 0 ; i < pages.length ; i ++){
                    if(pages[i].backgroundImage.nsisUseName.lastIndexOf("_") != -1){
                        let num = pages[i].backgroundImage.nsisUseName.substring(pages[i].backgroundImage.nsisUseName.lastIndexOf("_") + 1,pages[i].backgroundImage.nsisUseName.length);
                        try{
                            num = parseInt(num);
                            if(num > lastIndex) lastIndex = num;
                        }catch(e){}
                       
                    }
                }
                return lastIndex + 1;
            },
            getPageNameLastIndex (){
                let pages = this.$store.state.productInfo[this.getActiveOption].pages.page;
                let lastIndex = 0;
                for(let i = 0 ; i < pages.length ; i ++){
                    var pageName = pages[i].pageName + "";
                    if(pageName.lastIndexOf("_") != -1){
                        let num = pageName.substring(pageName.lastIndexOf("_") + 1,pageName.length).split(".")[0];
                        try{
                            num = parseInt(num);
                            if(num > lastIndex) lastIndex = num;
                        }catch(e){}
                       
                    }
                }
                return lastIndex + 1;
            },
            deleteSlidePage (){
                let pageName = this.$store.state.productInfo[this.getActiveOption].pages.page[this.getActivePageIndex].pageName;
                var pages = this.$store.state.productInfo[this.getActiveOption].pages.page;
                var slidePages = [];
                for(var i = 0 ; i < pages.length ; i ++){
                    if(pages[i].pageType == 1){
                        slidePages.push(pages[i]);
                    }
                }
                if(this.activePageType != 1){
                    packagingUtil.myAlert(pageName + "不能删除!","提示",this); 
                    return;
                }
                if(slidePages.length == 1){
                    packagingUtil.myAlert("至少需要一个轮播页面","提示",this);    
                    return;
                }
                let pageInfo = {
                    activePageIndex: this.getActivePageIndex,
                    activeOption: this.getActiveOption
                }
                this.$store.commit('deleteSlidePage',pageInfo);
                try{
                    let nextPage = this.$store.state.productInfo[this.getActiveOption].pages.page[this.getActivePageIndex];
                    this.selectPage(this.getActivePageIndex,nextPage.pageType,nextPage.pageName);
                }catch(e){

                }
               
            },
            swapItems (arr, index1, index2){
            　　arr[index1] = arr.splice(index2,1,arr[index1])[0];
            　　return arr;
            },
            upSlidePage () {
                var pageList = this.$store.state.productInfo[this.getActiveOption].pages.page;
                var index = this.getActivePageIndex;
                var num = (this.getActiveOption == 'installPage' ? 2 : 1); //安装界面轮播页后面还有两个页面，升级界面轮播页后面只有一个页面
            　　if (index > 2 && index < (pageList.length - num)) {
            　　　　 var newArr = this.swapItems(pageList, index, index - 1);
                    this.$store.commit("updateSlidePadesOrder", newArr);
                    this.selectPage(this.getActivePageIndex - 1,pageList[this.getActivePageIndex - 1].pageType,pageList[this.getActivePageIndex - 1].pageName);
            　　}else{
                    packagingUtil.myAlert("此页面禁止上移","提示",this);    
                }
            },
            downSlidePage () {
                var pageList = this.$store.state.productInfo[this.getActiveOption].pages.page;
                var index = this.getActivePageIndex;
                var num = (this.getActiveOption == 'installPage' ? 2 : 1); //安装界面轮播页后面还有两个页面，升级界面轮播页后面只有一个页面
            　　if (index < pageList.length - num - 1 && index >1) {
            　　　　 var newArr = this.swapItems(pageList, index, index + 1);
                    this.$store.commit("updateSlidePadesOrder", newArr);
                    this.selectPage(this.getActivePageIndex + 1,pageList[this.getActivePageIndex + 1].pageType,pageList[this.getActivePageIndex + 1].pageName);
            　　}else{
                     packagingUtil.myAlert("此页面禁止下移","提示",this);    
                }
            }
        },
        computed: {
            getSelectedPageName() {
                return this.$store.state.productInfo[this.type].pages.page[this.activePage].pageName;
            },
            getPageList() {
                if(this.$store.state.activeOption == 'installPage' || this.$store.state.activeOption == 'upgradePage')
                    return this.$store.state.productInfo[this.$store.state.activeOption].pages.page;
                else 
                    return {};
            },
            getActivePageIndex (){
                return this.$store.state.activePageIndex;
            },
            getActiveOption (){
                return this.$store.state.activeOption;
            }
        }
    }
</script>
<style>
/*安装、升级界面*/
#pageList{
  width: 350px;
  height: 550px;
  border: 1px solid #a8a8a8;
  border-radius: 4px;
  overflow: hidden;
  background-color: #ffffff;
  position: relative;
}
.activePage{
	background-color: #f7f7f7;
}
#pageList>ul{
  height:504px;
}
#pageList ul li{
	list-style: none;
	line-height: 35px;
    height: 35px;
	text-align: left;
	font-family: MicrosoftYaHei;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	color: #333333;
	border-bottom: 1px solid #a8a8a8;
	padding-left:19px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    position: relative;
}
#pageList>p.moveBtnBox{
    height: 46px;
    background: #ededed;
}
#pageList>p.moveBtnBox>span{
    height:28px;
    line-height: 28px;
    text-align: center;
    float: left;
    border: 1px solid #a8a8a8;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
}
#pageList>p.moveBtnBox>span.deleteBtn{
    width: 50px;
    margin: 8px 20px;
}
#pageList>p.moveBtnBox>span.moveBtn{
    width: 107px;
    margin: 8px 0 8px 8px;
}
#pageList>ul>li.groupList>img{
	width: 16px;
	height: 16px;
	right:10px;
	top :11px;
    position: absolute;
}
@media screen and (max-width: 1023px){
  #pageList {
    width: 290px;
    height: 500px;
  }
  #pageList>p.moveBtnBox>span.moveBtn {
    width: 87px;
  }
  #pageList>ul {
        height: 454px;
    }
}
@media screen and (min-width:1024px) and (max-width: 1365px){
    #pageList {
    width: 310px;
    height: 500px;
  }
  #pageList>p.moveBtnBox>span.moveBtn {
    width: 87px;
  }
  #pageList>ul {
        height: 454px;
    }
    
}
@media screen and (min-width:1366px) and (max-width: 1439px){
    #pageList {
    width: 310px;
    height: 450px;
  }
  #pageList>p.moveBtnBox>span.moveBtn {
    width: 87px;
  }
  #pageList>ul {
        height: 404px;
    }
}
@media screen and (min-width:1440px) and (max-width:1599px){
    #pageList {
    width: 330px;
    height:480px;
  }
  #pageList>p.moveBtnBox>span.moveBtn {
    width: 97px;
  }
  #pageList>ul {
        height: 434px;
    }
}
@media screen and (min-width:1600px) and (max-width:1919px){
   #pageList {
    width: 350px;
    height:500px;
  }
  #pageList>p.moveBtnBox>span.moveBtn {
    width: 107px;
  }
    #pageList>ul {
        height: 454px;
    }
}
</style>

